<script setup lang="ts">
import { openAuthFlowPopup } from '~comp-b/auth';

defineEmits<{
  open: [];
}>();
</script>

<template>
  <div
    v-if="!$store.user.verified?.authenticator"
    class="flex flex-wrap items-center gap-2 border-(1.5 sys-layer-e solid) rounded-2 bg-sys-layer-b/60 p-3 text-sm text-sys-text-body backdrop-blur-md"
  >
    <i class="i-local:shield text-7" />
    <div class="min-w-25 flex-[3]">
      {{ $t('ojz9KdZqXz4PdMTirOomr') }}
    </div>
    <div
      class="flex-1 cursor-pointer rounded-2 bg-sys-layer-d px-4 py-2 text-center hover:(bg-sys-layer-e text-sys-text-head)"
      @click="[$emit('open'), openAuthFlowPopup('enable2FA')]"
    >
      {{ $t('afNAw86zd2Lbvw8CpjGmz') }}
    </div>
  </div>
</template>
